import React, { Component } from 'react'
import '@/css/Login.css';
import { HashRouter, BrowserRouter, Switch, Route, Link } from "react-router-dom";

class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      username: '',
      password: '',
      bBtnSubmitIcon: false,
      bCatEyesClose: false,
      regIpt: false,
      btnText: '注 册 账 号'
    }
  }
  render() {
    let { username, password, bBtnSubmitIcon, bCatEyesClose, regIpt, btnText } = this.state
    return (
      <div className="bg-login">
        <img src={require('../img/logo.png')} className="logo" />
        <div style={{ height: "30px" }}></div>
        <div className="cat-eyes-open cat-eyes-registry">
          <div className="login-wrap">

            <div className="yt yt-pj yt-ac opt-desc">
              <div className="login-type"></div>
              <div><Link to="/login" className="go-path">已有账号?点此登录</Link></div>
            </div>

            <div className="registry-wrap">
              <div className="login-meta">用户名:<span className="regmeta font14">字母或下划线开头,4~16位</span></div>
              <div><input ref={e => this.refUserName = e} onChange={this.handleUserName} type="text" className="regi-wrap-ipt" /></div>
            </div>

            <div className="registry-wrap">
              <div className="login-meta">密码:<span className="regmeta font14">4~16位</span></div>
              <div><input ref={e => this.refPassWord = e} onChange={this.handlePassWord} type="password" className="regi-wrap-ipt" /></div>
            </div>

            <div className="registry-wrap">
              <div className="login-meta">确认密码:</div>
              <div><input ref={e => this.refPassWord2 = e} onChange={this.handlePassWord} type="password" className="regi-wrap-ipt" /></div>
            </div>

            <div style={{ height: '20px' }}></div>



            <button onTouchStart={() => { }} className={['btn-login', regIpt ? '' : 'c-disabled'].join(' ')} onClick={this.handleSubmit}>
              {bBtnSubmitIcon ? <i className="alifont font16 anim-rotate360">&#xe861;</i> : null}
              <span className="font16" style={{ marginLeft: '5px' }}>{bBtnSubmitIcon ? '处理中...' : btnText}</span>
            </button>
          </div>
        </div>
      </div>
    )
  }
  componentDidMount() {

  }
  handleUserName = (e) => {
    this.setState({
      username: e.target.value
    })
    this.regIpt()
  }
  handlePassWord = (e) => {
    this.setState({
      password: e.target.value
    })
    this.regIpt()
  }
  regIpt = () => {
    var usernamePattern = /^[a-zA-Z_][a-zA-Z0-9_-]{3,15}$/
    var passwordPattern = /^[^\u4e00-\u9fa5]{4,16}$/
    var uname = this.refUserName.value
    var upassword = this.refPassWord.value
    var upassword2 = this.refPassWord2.value
    console.log('名字', usernamePattern.test(uname))
    console.log('密码', passwordPattern.test(upassword))
    if (usernamePattern.test(uname) && passwordPattern.test(upassword) && upassword === upassword2) this.setState({ regIpt: true })
    else this.setState({ regIpt: false })
  }

  handleSubmit = async () => {
    let { bBtnSubmitIcon, regIpt, username, password } = this.state
    if (regIpt && !bBtnSubmitIcon) {
      this.setState({
        bBtnSubmitIcon: true
      })
      //此处发送请求
      var data = await React.$axios.post(React.$api.createUser, {
        username,
        password
      })

      if (data.errCode === 1) {
        var docCookies = React.$docCookies
        var config = React.$config
        docCookies.setItem(config.COOKIEJWTNAME, data.data.jwt, docCookies.addTime({ day: config.COOKIETIME }))
        this.props.match.history.push('/')
      }
      this.setState({
        bBtnSubmitIcon: false
      })





    }
  }
}
export default Login